.drawer {
  @apply fixed top-0 w-full h-screen max-w-3xl z-9 bg-pageText text-pageBG invisible pointer-events-none;
  height: calc(var(--vh, 1vh) * 100);
  will-change: transform;
  transition: visibility 0.2s 0.8s;

  &.is-left {
    @apply left-0 sm:border-r;
  }

  &.is-right {
    @apply right-0 sm:border-l;
  }

  &.is-active {
    @apply visible pointer-events-auto;
    transition-delay: 0s;
  }

  &.is-updating {
    @apply cursor-wait !important;
  }

  &--backdrop {
    @apply fixed inset-0 z-8 bg-black bg-opacity-40 pointer-events-none opacity-0;
    transition: opacity 0.15s linear;

    &.is-active {
      @apply pointer-events-auto opacity-100;
      backdrop-filter: blur(6px);
    }
  }

  &--inner {
    @apply flex flex-col relative h-full w-full;
  }
}
